import logo from './logo.svg';
import './App.css';
import React from 'react';
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import { message } from 'antd';
import axios from 'axios';

import {
  HomeOutlined,
  FileSearchOutlined,
  UserOutlined,
  BarChartOutlined,
  DesktopOutlined,
  PhoneOutlined
} from '@ant-design/icons';
import { Layout, Menu, Breadcrumb } from 'antd';
import { Register } from './user/register';
import { Login } from './user/login';
import { Home } from './home/home';
import { News } from './news/news';
import { Bid } from './bid/bid';
import { Profile } from './user/profile';
import { AdminPage } from './admin/admin';
import { NewsDetail } from './news/publish-news';
import { AskDetail } from './ask/ask';
import { Contact } from './home/contact';

const { Header, Content, Footer } = Layout;

class App extends React.Component {
  componentDidMount = () => {
    console.log("hello")
    if (localStorage.getItem("user") == null) {
      return
    } else {
      let user = JSON.parse(localStorage.getItem("user"))
      axios.get('http://localhost:8080/api/user/login' + "?" + "userId=" + user.userId + "&" + "password=" + user.password)
        .then((response) => {
          if (response.data.success === false) {
            localStorage.removeItem("user")
          } else {
            localStorage.setItem("user", JSON.stringify(response.data.data))
          }
        })
        .catch((error) => {
          message.error("Update user Error");
        });
    }
  }
  render = () => {
    return (
      <Router>
        <Layout className="layout">
          <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
            <div className="logo" />
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
              <Menu.Item key={"home"} icon={<HomeOutlined />}><a href="/#/home">IBidding</a></Menu.Item>
              <Menu.Item key={"news"} icon={<FileSearchOutlined />}><a href="/#/news">News</a></Menu.Item>
              <Menu.Item key={"bid"} icon={<BarChartOutlined />}><a href="/#/bid">My Bid</a></Menu.Item>
              <Menu.Item key={"profile"} icon={<UserOutlined />}><a href="/#/profile/my">Profile</a></Menu.Item>
              <Menu.Item key={"admin"} icon={<DesktopOutlined />}><a href="/#/admin">Administrator</a></Menu.Item>
              <Menu.Item key={"contact"} icon={<PhoneOutlined />}><a href="/#/contact">Contact</a></Menu.Item>
            </Menu>
          </Header>
          <Content style={{ margin: "0 0", backgroundColor: "white", minHeight: '82vh', marginTop: 64 }}>
            <Route path={"/register"} exact component={Register} />
            <Route path={"/login"} exact component={Login} />
            <Route path={"/home"} exact component={Home} />
            <Route path={"/news"} exact component={News} />
            <Route path={"/bid"} exact component={Bid} />
            <Route path={"/profile/:id"} component={Profile} />
            <Route path={"/admin"} component={AdminPage} />
            <Route path={"/news/:id"} exact component={NewsDetail} />
            <Route path={"/ask/:id"} component={AskDetail} />
            <Route path={"/contact"} component={Contact} />
          </Content >
          <Footer style={{ textAlign: 'center' }}>ibidding ©2021 Created by React</Footer>
        </Layout>
      </Router>
    )
  }
}

export default App;



